<template>
  <div class="dingdan">
    <div class="topbox">订单</div>
    <div class="navbox">
      <var-tabs v-model:active="active">
        <router-link class="luyoubox" to="/dingdan/allOrder">
          <var-tab>全部订单</var-tab></router-link
        >
        <router-link class="luyoubox" to="/dingdan/evaluated">
          <var-tab>待评价</var-tab>
        </router-link>
        <router-link class="luyoubox" to="/dingdan/refund">
          <var-tab>退款</var-tab>
        </router-link>
      </var-tabs>
    
    </div>
  </div>
    <div class="dingdanbox">
        <router-view></router-view>
      </div>
</template>

<script lang="ts" setup>



</script>

<style lang="scss" scoped>
.dingdan{
  position: fixed;
  top: 0;
  background: #fff;
  z-index: 999;
}
.luyoubox{
  width:130px;
  height: 30px;
}
.dingdanbox {
  width: 390px;
  min-height: 620px;
  padding: 100px 0 50px 0px;
}
.topbox {
  width: 100%;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.var-tab--active {
  color: #ff9f00;
  height: 20px;
}
.var-tabs--layout-horizontal{
  height: 30px;
}
.var-tabs__indicator {
  width: 70px !important;
  margin-left: 25px;
  background: #ff9f00;
}
</style>
